<template>
  <!-- 置标创建页面 -->
  <div class="IntegrationLibrary">
    <div class="btn-continer">
      <el-button
        icon="el-icon-refresh-right"
        style="float: right"
        @click="refreshfn()"
        circle
      ></el-button>

      <div class="btn-right">
        <el-input
          v-model="value"
          placeholder="按文件夹名称检索"
          clear
          class="el-inputClass"
        ></el-input>
      </div>
      <el-button
        icon="el-icon-search"
        @click="getList(1)"
        style="float: left; margin-right: 10px; margin-bottom: 10px"
        type="primary"
      ></el-button>
    </div>
    <div class="table-continer">
      <el-table
        :data="tableData"
        v-loading="loading"
        :key="key"
        :highlight-current-row="true"
        :header-cell-style="{ background: '#F0F0F6', color: '#2D3548' }"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        row-key="id"
        lazy
        :load="getChildrens"
        style="width: 100%"
        @row-click="selectionClick"
        ref="multipleTable"
      >
        <el-table-column fixed label="名称">
          <template slot-scope="scope">
            <span style="height: 16px; display: inline-block">
              <img
                v-show="!scope.row.fileType"
                src="../assets/bao.png"
                alt=""
                style="margin-top: 3px; display: block"
              />
              <i
                v-show="scope.row.fileType"
                :class="iconClassName(scope.row.fileType)"
                style="font-size: 18px;color:#3386fe;vertical-align: middle;"
              ></i>
            </span>
            {{ scope.row.name ? scope.row.name : scope.row.fileName }}
          </template>
        </el-table-column>
        <el-table-column prop="valueType" label="类型"> </el-table-column>
        <el-table-column prop="crator" label="创建人"> </el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state == 0">暂存</span>
            <span v-if="scope.row.state == 1">待审核</span>
            <span v-if="scope.row.state == 2">审核通过</span>
            <span v-if="scope.row.state == 3">否决</span>
            <span v-if="scope.row.state == 4">删除待审核</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope" v-if="scope.row.fileType">
            <el-button type="text" size="small" @click="seeFn(scope.row)"
              ><i class="el-icon-c-scale-to-original el-icon--left">
                查看</i
              ></el-button
            >
            <el-button @click="checkView(scope.row)" type="text" size="small"
              ><i class="el-icon-view el-icon--left"> 预览</i></el-button
            >
            <el-button @click="download(scope.row)" type="text" size="small"
              ><i class="el-icon-edit el-icon--left"> 下载</i></el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="Pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="pageNum"
        :page-sizes="[5, 10, 15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <checkimg
      :imgList="imgList"
      :showViewer="showViewer"
      @closeImg="closeImg"
    />
    <openPdf ref="Pdf" />
    <openMusci
      :showPlayer="showPlayer"
      :videoPlay="videoPlay"
      @musicClose="musicClose"
    />
    <el-dialog
      title="视频"
      :visible.sync="playVideo"
      width="40%"
      @close="closeMp4"
    >
      <div class="content">
        <openMp4 :video="video" :playVideo="playVideo" />
      </div>
    </el-dialog>
    <!-- 置标弹窗 -->
    <el-dialog title="文件信息" :visible.sync="dialogFormVisible">
      <div class="markup">
        <!-- <div>
          编号：<span>{{ obj.id }}</span>
        </div> -->
        <div class="conss">
          <div>
            文件名称：<span>{{ obj.fileName }}</span>
          </div>
          <div>
            文件大小：<span
              >{{ (obj.fileSize / 1024 / 1024).toFixed(3) }}M</span
            >
          </div>
          <div>
            文件类型：
            <span v-if="obj.fileType == 1">图片</span>
            <span v-if="obj.fileType == 2">视频</span>
            <span v-if="obj.fileType == 3">文档</span>
            <span v-if="obj.fileType == 4">音频</span>
          </div>
          <div>
            标签名称：
            <el-tag
              class="eltag"
              v-for="(item, index) in obj.fileLabel"
              :key="index + 'tag2'"
              ><i :class="'el-icon--left xz'"></i>{{ item }}</el-tag
            >
          </div>
          <div>
            创建人：<span>{{ obj.creator }}</span>
          </div>
          <div>
            创建时间：<span>{{ obj.createTime }}</span>
          </div>
        </div>
        <!-- <div>整编：<span>{{obj.id}}</span></div> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import checkimg from "../components/checkImg.vue";
import openPdf from "../components/openPdf.vue";
import openMp4 from "../components/openMp4.vue";
import openMusci from "../components/openMusci.vue";
export default {
  name: "IntegrationLibrary",
  components: { checkimg, openPdf, openMp4, openMusci },

  data() {
    return {
      tableData: [],
      tableAllData: [], // 存储所有的表格数据
      loading: false,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      selectId: [],
      key: 0,
      value: "",
      obj: "",
      dialogFormVisible: false,
      showViewer: false,
      fileList: [],
      fileType: null, //文件类型
      imgList: [],
      showPlayer: false,
      playVideo: false,
      videoPlay: {
        title: "名称",
        artist: "音频",
        src: "",
        pic: "https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg",
      },
      video: {
        // 视频播放源
        url: "",
        // 视频海报
        // cover: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
        muted: false, // 是否静音播放
        loop: false, // 视频是否循环播放
        preload: "auto", // 视频预加载
        poster: "", // 原生视频默认海报暂不设置
        volume: 1, // 默认音量
        autoplay: false, // 视频自动播放
      },
      fileList: [
        {
          id: 1,
          fileName: "测试PDF",
          fileUrl: "http://192.168.3.189/aaa.pdf",
        },
      ],
      url: "http://192.168.3.189/aaa.pdf", //文件地址
    };
  },
  mounted() {
    this.pageNum = 1;
    this.getList();
  },
  methods: {
    seeFn(row) {
      let params = {
        id:row.id,
        type: row.fileType,
      };
      this.$api.getUpdateData(params).then((res) => {
       
      this.obj = {};
      this.obj = { ...res.data };

      if (this.obj.fileLabel) {
        this.obj.fileLabel = this.obj.fileLabel.split(";");
      }
      this.dialogFormVisible = true;
      });
    
    },
    refreshfn() {
      this.pageNum = 1;
      this.getList();
    },
    getList(id) {
      let obj;
      if (id == 1) {
        obj = {
          parentId: 0,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.value,
          ranges: "1",
        };
      } else {
        obj = {
          parentId: 0,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.value,
        };
      }
      this.loading = true;
      this.$api
        .selectList(obj)
        .then((res) => {
          this.loading = false;
          this.tableData = res.data.list;
          this.tableData.forEach((res) => {
            res.hasChildren = true;
          });
          this.total = res.data.total;
          this.key = Math.random();
          this.selectId = [];
        })
        .catch(() => {
          this.selectId = [];
          this.loading = false;
        });
    },
    getChildrens(tree, treeNode, resolve) {
      let obj = {
        parentId: tree.id,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        name: tree.name,
      };
      this.$api.selectList(obj).then((res) => {
        let data;
        if (Array.isArray([res.data])) {
          if (res.data.length == 0) {
            tree.hasChildren = false;
            this.$set(this.tableData, tree.id.toString() + "asd", "");
            return;
          }
        }
        if (res.data && res.data.list.length > 0) {
          data = res.data.list.map((item, index) => {
            return {
              ...item,
              hasChildren: true,
              children: [],
            };
          });
          this.tableAllData = this.tableAllData.concat(data); // 保存表格数据
          resolve(data);
        } else {
          tree.hasChildren = false;
          this.$set(this.tableData, tree.id.toString() + "asd", "");
        }
      });
    },
    selectionClick(row) {
      this.selectId = [row];
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList();
    },
    closeImg(flag) {
      this.showViewer = flag;
    },
    //下载
    download(row) {
      window.open(
        window.CONFIG.url + `/collect/projectReorganize/download/${row.id}`
      );
    },
    checkView(row) {
      this.$api
        .getUrl({ id: row.id })
        .then((res) => {
          if (res.data) {
            let type = row.fileType;
            if (type == 1) {
              this.imgList = [CONFIG.url + "/" + res.data];
              this.showViewer = true;
            } else if (type == 3) {
              this.$refs.Pdf.previewFn(CONFIG.url + "/" + res.data);
            } else if (type == 2) {
              this.video.url = CONFIG.url + "/" + res.data;
              this.$nextTick(() => {
                this.playVideo = true;
              });
            } else {
              this.showPlayer = false;
              let ipUrl = CONFIG.url + "/" + res.data;
              this.$nextTick(() => {
                this.videoPlay.src = ipUrl;
                this.videoPlay.title = "音频";
                this.videoPlay.artist = " ";
                this.showPlayer = true;
              });
            }
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
        })
        .catch((res) => {
          this.$message({
            showClose: true,
            message: res.msg,
            type: "error",
          });
        });
    },
    closeMp4() {
      this.$nextTick(() => {
        this.video.url = "obj";
        this.playVideo = false;
      });
    },
    musicClose(flag) {
      let ipUrl = "obj";
      this.$nextTick(() => {
        this.videoPlay.src = ipUrl;
        this.videoPlay.title = "";
        this.videoPlay.artist = "";
        this.showPlayer = flag;
      });
    },
    iconClassName(type) {
      let name = "";
      switch (type) {
        case "1":
          name = "el-icon-picture-outline";
          break;
        case "2":
          name = "el-icon-video-camera";
          break;
        case "3":
          name = "el-icon-document";
          break;
        case "4":
          name = "el-icon-service";
          break;
        default:
          name = "el-icon-document";
          break;
      }
      return name;
    },
  },
};
</script>
<style scoped lang="scss">
.IntegrationLibrary {
  padding: 0 30px;
  overflow: hidden;
  .content {
    height: 520px;
  }
  .btn-continer {
    margin-top: 20px;
    margin-bottom: 20px;
    .btn-right {
      float: left;
      margin-right: 10px;
    }
  }
  .Pagination {
    text-align: right;
    margin-top: 40px;
    margin-bottom: 40px;
  }
  .markup {
    border-top: 1px solid #ccc;
    div {
      padding: 15px;
      font-size: 18px;
      font-weight: bold;

      span {
        font-size: 16px;
        font-weight: 400;
      }
    }
    .eltag {
      margin-right: 10px;
      margin-bottom: 5px;
    }
  }
}
</style>

<style>
._progress ._time-current,
._progress ._time-amount {
  width: 80px;
}
</style>
